<template>
  <div>
    <el-menu class="content">
      <el-button
        class="createButton"
        @click="
          createSessionVisable = true;
          createSessionName = '';
        "
        >创建会话
      </el-button>

      <el-dialog
        v-model="createSessionVisable"
        title="创建会话"
        append-to-body="true"
      >
        <el-form>
          <el-form-item label="会话名称">
            <el-input v-model="createSessionName"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="createSession">Create</el-button>
          </span>
        </template>
      </el-dialog>

      <el-menu-item
        v-for="(item, i) in sessionList"
        :key="i"
        @click="selectSession(item.sessionId)"
        :class="{ active: item.sessionId === currentSessionId }"
      >
        <router-link
          :to="{
            path: '/channels/' + currentServerId + '/' + item.sessionId,
          }"
        >
          <div style="width: 100%">{{ item.sessionName }}</div>
        </router-link>
      </el-menu-item>
      <router-view />
    </el-menu>
  </div>
</template>
<style scoped>
.el-menu-item {
  border-radius: 9px;
}
a {
  text-decoration: none;
}
.active {
  background-color: #cac6c6;
}

.createButton {
  width: 100%;
  height: 50px;
  background-color: #454545;
  border-right: 1px #353535;
  border-right-style: solid;
  border-bottom: 0;
  border-left: 0;
  border-top: 0;
}

.content {
  position: fixed;
  left: 70px;
  width: 235px;
  bottom: 50px;
  top: 0;
  background-color: #353535;
  overflow-y: scroll;
}
::-webkit-scrollbar {
  display: none;
}
</style>

<script>
import { onMounted, ref, watch } from "vue";
import { useStore } from "vuex";

export default {
  name: "ContentList",
  setup() {
    const store = useStore();
    const sessionList = ref([]);
    const currentServerId = ref("0");
    const currentSessionId = ref("");
    const createSessionVisable = ref(false);
    const createSessionName = ref("");
    const getSessionList = async () => {
      sessionList.value = store.getters.sessionList;
      currentServerId.value = store.getters.CurrentServerId;
    };

    const selectSession = (id) => {
      store.commit("SELECT_SESSION", id);
      currentSessionId.value = id;
      //alert(store.getters.CurrentSessionId);
    };

    const createSession = () => {
      if (createSessionName.value === "") return;
      let session = {
        sessionId: currentServerId.value + "_" + "30",
        sessionName: createSessionName.value,
        belongServerId: currentSessionId.value,
        sessionImg: "../../assets/1.png",
        messages: [
          {
            senderID: "1",
            senderName: "Lebin",
            senderImg: "../assets/1.png",
            data: "",
            content:
              "hello,welcome to discord!hello,welcome to discord!hello,welcome to discord!hello,welcome to discord!hello,welcome to discord!",
          },
          {
            senderID: "1",
            senderName: "Lebin",
            senderImg: "../assets/1.png",
            data: "",
            content: "hello,welcome to discord!",
          },
          {
            senderID: "1",
            senderName: "Lebin",
            senderImg: "../assets/1.png",
            data: "",
            content: "hello,welcome to discord!",
          },
        ],
      };

      store.commit("CREATE_SESSION", session);
      sessionList.value.push(session);
      createSessionVisable.value = false;
    };

    watch(
      () => store.getters.CurrentServerId,
      (val, old) => {
        console.log(val, old);
        getSessionList();
      }
    );
    //渲染完成后运行的代码
    onMounted(getSessionList);
    //更新视图的数据
    return {
      currentServerId,
      currentSessionId,
      sessionList,
      createSessionVisable,
      createSessionName,
      createSession,
      selectSession,
      getSessionList,
    };
  },
};
</script>
